<template>
  <div>
    <div style="margin-bottom: 10px">
      <el-button @click="handleSelectCreatives">从素材库选择</el-button>
    </div>
    <div>
      <el-card v-for="(creative, inx) in creatives" :key="inx">
        <el-row>
          <el-col :span="4">
            <el-image
              style="width: 100px; height: 100px; cursor: pointer;"
              :src="creatives[inx].type===0?creatives[inx].creativeUrl:creatives[inx].thumbnailUrl"
              :fit="'cover'"
              @click="handlePreview(creatives[inx])">
            </el-image>
          </el-col>
          <el-col :span="20">
            <el-row>
              <span v-if="creatives.length > 1" style="cursor: pointer;color:red;" @click="deleteCreative(inx)">
                <i class="el-icon-delete">删除</i></span>
            </el-row>
            <el-row v-if="creatives[inx].type === 1">
              <span v-if="creatives.length > 1" style="cursor: pointer;color:#66b1ff;" @click="changeCover(inx)">
                <i class="el-icon-picture">视频封面</i></span>
            </el-row>
            <el-row style="margin-top:10px">
              {{creatives[inx].name}}
            </el-row>
          </el-col>
        </el-row>

      </el-card>
    </div>
    <div style="margin-top: 30px">
      <div>广告文案</div>
      <div>
        <div>
          <i class="el-icon-circle-plus-outline" style="color: #34acff;font-size: 15px;cursor:pointer;"
             @click="showTextSelection()" ></i>
          <span style="margin-left: 5px;color:#34acff;cursor:pointer;"
                @click="showTextSelection()" id="circle-plus-outline" >从文案库选择文案</span>
        </div>
        <div v-for="(doc,index) in docs" :key="index" style="margin: 5px">
          <el-autocomplete
            size="mini"
            v-model="docs[index]"
            :fetch-suggestions="queryCreativeTextSearch"
            placeholder="请输入内容"
            style="width: 500px"
          ></el-autocomplete>
          <el-button v-if="index === 0" size="mini" type="text" icon="el-icon-plus"
                     @click="addWordsForDynamic"
                     style="margin-left: 10px"></el-button>
          <el-button v-else size="mini" type="text" icon="el-icon-minus"
                     @click="()=>{docs.splice(index,1)}"
                     style="margin-left: 10px"></el-button>
        </div>
      </div>
    </div>
    <div style="margin-top: 30px">
      <div>目标页</div>
      <div>
        <div>
          <el-radio :disabled="isEdit" v-model="_callToActionType" label="1">动态优选</el-radio>
        </div>
        <div>
          <el-radio :disabled="isEdit" v-model="_callToActionType" label="0">标准</el-radio>
        </div>
        <el-collapse-transition>
          <div v-show="callToActionType === '0'">
            <el-select v-model="ctas" placeholder="请选择" size="mini"
                       multiple
                       :multiple-limit="3"
                       @change="changeCTAVals"
            >
              <el-option v-for="item in callToActionList"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </div>
        </el-collapse-transition>
      </div>
    </div>
    <creative-select-drawer :offer-id="offerId"
                            :visible.sync="visible"
                            v-if="visible"
                            :creative-list.sync="creatives"
                            @changeCreatives="changeCreatives"
                            ref="creativeDrawer"
    >
    </creative-select-drawer>
    <creative-text-drawer
      :visibletext.sync="visibletext"
      v-if="visibletext"
      :docs.sync=docs
      :offer-id="offerId"
      @changeDocs="changeDocs"
      ref="docsDrawer"
    >
    </creative-text-drawer>
    <creative-card-preview v-model="assetPreview" :media-preview="previewCreative">
    </creative-card-preview>
    <suggest-cover
      v-if="coverOpen"
      :visible.sync="coverOpen"
      :account-id="accountId"
      :creative="currCreative"
      @returnCoverId="returnCoverId"
    ></suggest-cover>
  </div>
</template>

<script>
  import CreativeSelectDrawer from "@/views/campaign-management/components/CreativeSelectDrawer";
  import SuggestCover from "@/views/campaign-management/components/SuggestCover";
  import CreativeTextDrawer from "@/views/campaign-management/components/CreativeTextDrawer";
  import CreativeCardPreview from "../../../components/CreativeCardPreview/CreativeCardPreview";
  import _ from "lodash";

  export default {
    name: "AcoAdEdit",
    components: {
      CreativeSelectDrawer,
      CreativeTextDrawer,
      CreativeCardPreview,
      SuggestCover
    },
    props: {
      creatives:{
        type:Array
      },
      docs:{
        type:Array
      },
      ctas:{
        type:Array
      },
      queryParams:{
        type:Object
      },
      callToActionList:{
        type:Array
      },
      callToActionType:{
        type:String
      },
      offerId: {
        type:String
      },
      textData: {
        type: Array
      },
      isEdit: {
        type:Boolean,
        default:false
      },
      accountId: {
        type: String
      }
    },
    computed:{
      transformCreativeText() {
        return this.textData.map(item => {
          return {value: item.text}
        })
      },
      _callToActionType:{
        get() {
          return this.callToActionType
        },
        set(val) {
          this.$emit('update:call-to-action-type',val)
        }
      }
    },
    data(){
      return {
        assetPreview: false,
        previewCreative: null,
        visible: false,
        visibletext: false,
        coverOpen: false,
        currCreative: {},
        coverMap: new Map(),
      }
    },
    created() {
      console.log("account id ", this.accountId)
    },
    methods:{
      clear(){
        this.visible = false
        this.visibletext = false
      },
      handleSelectCreatives(){
        // this.$refs.creativeDrawer.getCreativeTabelData()
        this.visible = true
      },
      queryCreativeTextSearch(queryString, cb){
        cb(this.transformCreativeText);
      },
      addWordsForDynamic(){
        if(this.docs.length >= 5){
          this.$message.error("文案不能超过5个")
        }else {
          this.docs.push('')
        }
      },
      deleteCreative(i){
        this.creatives.splice(i,1)
      },
      changeCreatives(newArr){
        // this.creatives = newArr
        this.$emit("changeAcoCreatives", newArr)
      },
      showTextSelection(){
        this.visibletext = true
        this.$refs.docsDrawer.getTextData()
      },
      changeCTAVals(val){
        this.$emit("changeCTAVals", val)
      },
      changeDocs(val){
        this.$emit("changeDocs", val)
      },
      handlePreview(row){
        this.previewCreative = _.cloneDeep(row)
        this.assetPreview = true
      },
      changeCover(idx){
        this.currCreative = this.creatives[idx]
        this.coverOpen = true
      },
      returnCoverId(coverId, creativeId, accountId, coverUrl){
        let newArr = _.cloneDeep(this.creatives)
        let row = newArr.find(item => item.id === creativeId)
        if(row !== undefined){
          this.coverMap.set(creativeId, coverId)
          row.thumbnailUrl = coverUrl
          this.$emit("changeAcoCreatives", newArr)
          this.$emit("changeCoverMap", _.cloneDeep(this.coverMap))
        }
        this.resetCoverConf()
      },
      resetCoverConf(){
        this.currCreative = {}
        this.coverOpen = false
      },
    }
  }
</script>
